window.addEventListener('load', function () {
    // 轮播页功能
    new Swiper('.swiper', {
        //direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
        autoplay: true,

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    })


    // 动态数据渲染功能
    //获取数据结构
    let serviceData = [{
        imgUrl: './img/service01.svg',
        title: 'API私有化服务',
        info: '可部署本地&专有云的Web API'
    }, {
        imgUrl: './img/service02.svg',
        title: '源码云监测',
        info: '实时代码托管、威胁情报监控'
    }, {
        imgUrl: './img/service03.svg',
        title: '源码有赢',
        info: '一站式营销活动服务平台'
    }, {
        imgUrl: './img/service04.svg',
        title: 'YuanMa API',
        info: 'API开发者协作平台'
    }]

    //遍历获取数据
    serviceData.forEach(function (v) {
        getEle('#service-list').innerHTML += `
    <li>
        <img src="${v.imgUrl}" alt="">
        <h2>${v.title}</h2>
        <p>${v.info}</p>
        <span><a href="#">去搜索</a></span>
    </li>
    `
    })



    // API数据渲染功能
    // 定义数据源
    let apiDate = [
        {
            imgUrl: './img/api01.svg',
            title: '生活服务'
        }, {
            imgUrl: './img/api02.svg',
            title: '金融科技'
        }, {
            imgUrl: './img/api03.svg',
            title: '交通地理'
        }, {
            imgUrl: './img/api04.svg',
            title: '充值缴费'
        }, {
            imgUrl: './img/api05.svg',
            title: '数据智能'
        }, {
            imgUrl: './img/api06.svg',
            title: '企业工商'
        }, {
            imgUrl: './img/api07.svg',
            title: '应用开发'
        }, {
            imgUrl: './img/api08.svg',
            title: '电子商务'
        }, {
            imgUrl: './img/api09.svg',
            title: '吃喝玩乐'
        }, {
            imgUrl: './img/api10.svg',
            title: '文娱视频'
        }
    ];

    // 定义变量保存结构
    let str = '';
    // 遍历数据源，拼接结构
    apiDate.forEach(function (v) {
        str+= `
            <li>
                <img src="${v.imgUrl}" alt="">
                <h2>${v.title}</h2>
            </li>
            `
    })
    // 把指定拼接好的html添加到指定的位置#apiList
    getEle('#apiList').innerHTML=str;



    // API 交互效果
    let apiDom=getEleAll('#apiList li');
    let oldImg='';
    
    apiDom.forEach(function(v){
        v.addEventListener('mouseover',function(){
            this.style.background='#2f7ee9';
            this.lastElementChild.style.color='#fff';

            let imgurl=this.firstElementChild.src;//获取当前li中的img的src
            //保存原图到变量
            oldImg=imgurl;
            //设置替换过的地址到this.fristElementChild.src
            this.firstElementChild.src=imgurl.replace('.svg','-c.svg')
        })

        v.addEventListener('mouseout',function(){
            this.style.backgroundColor='';
            this.lastElementChild.style.color='';
            //还原老图像
            this.firstElementChild.src=oldImg;
        })
    })

    //手动轮播图
    //获取所有DOM
    let itemDom=getEleAll('.hcfc-down')
    
    let index=0;
    //显示第一个盒子
    itemDom[index].style.display='block'

    window.setInterval(function(){
        //一刀切，清楚所有样式
        for(let i=0; i<itemDom.length; i++){
            itemDom[i].style.display='';
        }

        index++;
        //显示下一个盒子
        itemDom[index].style.display='block'
        //判断如果走到最后一个盒子1就把index设为初始值
        if(index==itemDom.length-1){
            index=-1;
        }

    },2000)


    let sprite=document.querySelector('.sprite')

    sprite.onclick=function(){
        let y=window.scrollY;
        let timer=setInterval(function(){
            y=-500;
            window.scrollTo(0,y)
            if(y<=0){
                clearInterval(timer)
            }
        },50)
    }





})
















